<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-05-07 08:47:41
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:26:57
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <img src="@/assets/images/icon-field.jpg" alt="" />
        <span style="margin-left: 10px">报名字段设置</span>
      </div>
      <div class="btn">
        <el-button
          type="primary"
          size="default"
          @click="newFiled"
          v-hasPermi="['registerset:field:add']"
        >
          + 新增字段
        </el-button>
      </div>
    </div>
    <div class="ipt" v-if="selShow">
      <el-input
        v-model="input"
        placeholder="请输考试名称/主要用途"
        size="normal"
        clearable
        style="width: 220px"
      ></el-input>
      <el-button type="primary" size="default" @click="search">
        搜索
      </el-button>
    </div>
    <div class="tog-btn" v-else>
      <span style="margin-left: 10px">
        已选中 {{ multipleSelection.length }} 项
      </span>
      <el-button
        type="primary"
        size="default"
        plain
        @click="preview"
        :disabled="disabled"
      >
        预览
      </el-button>
      <el-button
        type="primary"
        size="default"
        plain
        @click="edit()"
        :disabled="disabled"
        v-hasPermi="['registerset:field:edit']"
      >
        编辑
      </el-button>
      <el-button
        type="primary"
        size="default"
        plain
        @click="onJump()"
        :disabled="disabled"
      >
        字段设置
      </el-button>
      <el-button
        type="danger"
        size="default"
        plain
        @click="del"
        v-hasPermi="['registerset:field:del']"
      >
        删除
      </el-button>
    </div>
    <el-table
      :data="fieldData"
      @selection-change="handleSelectionChange"
      style="margin-top: 20px"
      :height="tableHight"
    >
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="examinationName" label="考试名称">
      </el-table-column>
      <el-table-column prop="mainUses" label="主要用途"> </el-table-column>
      <el-table-column prop="createBy" label="创建人"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="新增字段"
      :visible.sync="dialogNemVisible"
      width="35%"
      @close="newClose()"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <el-form
        :model="formNewField"
        ref="formNewField"
        :rules="formRules"
        label-width="80px"
        size="normal"
        v-if="dialogNemVisible"
        label-position="top"
      >
        <el-form-item label="考试名称" prop="examinationName">
          <el-input
            v-model="formNewField.examinationName"
            style="width: 330px"
            placeholder="请输入考试名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="主要用途">
          <el-input
            type="textarea"
            v-model="formNewField.purpose"
            style="width: 330px"
            placeholder="请输入主要用途"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogNemVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" v-if="toggle == 1">
            保存
          </el-button>
          <el-button type="primary" @click="putSubmit" v-else> 保存 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="content">
      <el-dialog
        title="预览"
        :visible.sync="dialogProview"
        width="60%"
        custom-class="dialogClass"
        :close-on-click-modal="false"
      >
        <main-content
          v-for="(item, index) in formList"
          :key="index"
          :formList="item"
          class="dialog-content"
        ></main-content>
        <span slot="footer">
          <el-button @click="dialogProview = false">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getexamInformation,
  addexamInformation,
  putexamInformation,
  delexamInformation,
  getCustomFieldList,
} from "@/api/signUp";
import MainContent from "./conponents/mainContent.vue";
export default {
  components: {
    MainContent,
  },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      dialogProview: false,
      selShow: true,
      disabled: false,
      multipleSelection: [], // 多选数组集合
      pageNum: 1,
      total: 0,
      pageSize: 10,
      filedId: Number,
      toggle: 1,
      input: "",
      formList: [],
      formRules: {
        examinationName: [
          { required: true, message: "请输入考试名称", trigger: "blur" },
        ],
      },
      dialogNemVisible: false,
      lookFeedback: {},
      formNewField: {
        examinationName: "",
        purpose: "",
      },
      fieldData: [],
    };
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getFiledData();
      }
    },
  },
  created() {
    this.getFiledData();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },

  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    // 新建字段

    newFiled() {
      this.dialogNemVisible = true;
    },
    // 获取自定义表单
    getFieldList() {
      getCustomFieldList({
        examType: this.multipleSelection[0].id,
      }).then((res) => {
        this.formList = res.rows;
      });
    },
    search() {
      this.getFiledData();
    },
    handleSelectionChange(val) {
      this.selShow = false;
      this.multipleSelection = val;
      if (val.length == 0) {
        this.selShow = true;
      }
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getFiledData();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      // sessionStorage.setItem("pagenum", val);
      this.pageNum = val;
      this.getFiledData();
    },
    newClose() {
      this.formNewField.examinationName = "";
      this.formNewField.purpose = "";
    },
    // 获取所有数据
    getFiledData() {
      getexamInformation({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        identification: this.input,
      }).then((res) => {
        console.log(res);
        const data = res.rows;
        this.fieldData = data;
        this.total = res.total;
      });
    },
    edit() {
      let row = {};
      if ((this.multipleSelection.length = 1)) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          row = this.multipleSelection[i];
        }
      }
      console.log(row);
      this.dialogNemVisible = true;
      this.formNewField.examinationName = row.examinationName;
      this.formNewField.purpose = row.mainUses;
      this.filedId = row.id;
      this.toggle = 2;
    },
    preview() {
      this.getFieldList();
      this.dialogProview = true;
    },
    async del() {
      let arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i].id);
      }
      const confirmResult = await this.$confirm(
        "此操作将永久删除该职位, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        let res = await delexamInformation(arr);
        this.getFiledData();
        return this.$message.success("删除成功！");
      }
    },
    onJump() {
      let row = {};
      if ((this.multipleSelection.length = 1)) {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          row = this.multipleSelection[i];
        }
      }
      this.$router.push("/fieldsettings?id=" + row.id);
    },
    onSubmit() {
      this.$refs.formNewField.validate(async (valid) => {
        if (!valid) return;
        let res = await addexamInformation({
          examinationName: this.formNewField.examinationName,
          mainUses: this.formNewField.purpose,
        });
        this.$message.success(res.msg);
        this.getFiledData();
        this.dialogNemVisible = false;
      });
    },
    putSubmit() {
      this.$refs.formNewField.validate(async (valid) => {
        if (!valid) return;
        let res = await putexamInformation({
          id: this.filedId,
          examinationName: this.formNewField.examinationName,
          mainUses: this.formNewField.purpose,
        });
        this.$message.success(res.msg);
        this.getFiledData();
        this.toggle = 1;
        this.dialogNemVisible = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  .bread {
    margin-top: 20px;
    margin-left: 5px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    line-height: 30px;
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }
  .btn {
    margin-top: 16px;
    .el-button--primary {
      background-color: #ed732e;
      border: #ed732e;
    }
  }
}
.tog-btn {
  margin-top: 20px;
}
.col1 {
  cursor: pointer;
  color: #1267fa;
  margin-right: 20px;
}
.col2 {
  cursor: pointer;
  color: #ff4040;
}
.ipt {
  margin-top: 20px;
  /deep/ .el-input__inner {
    border-radius: 4px 0 0 4px;
  }
  .el-button--primary {
    border-radius: 0 4px 4px 0;
  }
}
.el-form {
  margin-left: 85px;
}
/deep/.el-textarea__inner {
  height: 84px !important;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.content {
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
    height: 600px;
    overflow-y: auto;
  }
  .dialog-content {
    width: 45%;
    margin-left: 40px;
  }
}
</style>